{% import _self as self %}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>{{ page_title }}</title>
    <link rel="shortcut icon" href="{{ base_url }}img/favicon.ico" type="image/x-icon" />

    {% for css_ref in css %}
    <link rel='stylesheet' type='text/css' href='{{ css_ref }}' />
    {% endfor %}

    {# TODO, eventually remove these form individual twig files and enable this one
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    #}

    {% for js_ref in js %}
    <script type='text/javascript' src='{{ js_ref }}'></script>
    {% endfor %}

    <script type="text/javascript">
        function ducky() {
            var duck = document.getElementById("duckdiv");
            var banner = document.getElementById("submitty-banner");
            banner.style.display = "block";
            document.getElementById('moorthy-duck').onclick = null;
            var pos = 5;
            var id = setInterval(frame, 5);
            function frame() {
                if (screen.width - pos <= -350) {
                    clearInterval(id);
                    banner.style.display = "none";
                    duck.style.right = -280 + 'px';

                    resetDriver();
                }
                else {
                  pos++;
                  duck.style.right = pos + 'px';
                }
            }
        }

        function resetDriver(){
            var duck = document.getElementById("duckdiv");
            var pos = -280;

            var id = setInterval(reset, 5);

            // all done! bring the ducky home
            function reset(){
                if (duck.style.right === '0px'){
                    clearInterval(id);
                    document.getElementById('moorthy-duck').onclick = function(){ducky();}
                }
                else {
                    pos ++;
                    duck.style.right = pos + 'px';
                }
            }
        }

    </script>

</head>
<script>var onAjaxInit;</script>
<body data-base-url="{{ base_url }}" data-course-url="{{ course_url }}" data-csrf-token="{{ csrf_token }}" onload="if (onAjaxInit) { onAjaxInit(); }">
<a id="skip-nav" href="#main">Skip to main content</a>
    {% if wrapper_urls['top_bar.html'] != null %}
        {# uploaded homepage redirect can go here? #}
        <iframe sandbox="allow-top-navigation-by-user-activation allow-top-navigation" id="top_bar" src="{{ wrapper_urls['top_bar.html'] }}" frameborder="0"></iframe>
    {% endif %}
        {% if wrapper_urls['left_sidebar.html'] != null %}
            {# uploaded sidebar can go here? #}
            <iframe sandbox="allow-top-navigation-by-user-activation allow-top-navigation" id="left_sidebar" src="{{ wrapper_urls['left_sidebar.html'] }}" frameborder="0"></iframe>
        {% endif %}
        {# separates our content from user custom bars #}
        <div id="submitty-body" class="flex-col" style="display:none;">
            <div id="mobile-menu">
                <div id="menu-header" class="flex-row">
                <a href="{{ base_url }}" aria-label="Go to Submitty Home"><h1>Submitty</h1></a>
                    <button id="menu-exit"><span class="screen-reader">Close Menu</span><i class="fas fa-times"></i></button>
                </div>
                <ul>
                    {% set total_notifications = 0 %}
                    {% for button in sidebar_buttons %}
                        {% if button.getTitle() != "Collapse Sidebar" %}
                            {{ self.render_sidebar_button(button, true) }}
                        {% endif %}
                        {% if button.getBadge() %}
                            {% set total_notifications = total_notifications + button.getBadge() %}
                        {% endif %}
                    {% endfor %}
                </ul>
            </div>
            <div id="menu-overlay"></div>
            <nav class="flex-row shadow">
                <div id="nav-links">
                    <a id="home-button" class="black-btn" href="{{ base_url }}" aria-label="Go to Submitty Home">
                        <img id="submitty-mascot-home-btn"
                         src="{{ base_url }}/img/{{ duck_img }}"
                         alt="Submitty's duck mascot!"
                         height = "50px"
                         />
                     </a>
                    <div id="breadcrumbs">
                        {% for b in breadcrumbs %}
                            {% if loop.index0 > 0 %}
                                <span>&gt;</span> {# span required to give conditional rendering #}
                            {% endif %}
                            <div class="breadcrumb">
                                {% if b.getUrl() is not empty and not loop.last %}
                                    <a href='{{ b.getUrl() }}'>{{ b.getTitle() }}</a>
                                {% else %}
                                    <span>{{ b.getTitle() }}</span>
                                {% endif %}
                                {% if b.getExternalUrl() is not empty %}
                                    <a class="external-breadcrumb" href="{{ b.getExternalUrl() }}" target="_blank" aria-label="Go to {{ b.getTitle() }}"><i class="fas fa-external-link-alt"></i></a>
                                {% endif %}
                            </div>
                        {% endfor %}
                    </div>
                </div>
                <div id="duckdiv"
                    {% if enable_banner %}
                        style="position:relative;top:-30px; right:12px;"
                >
                    {% else %}
                >
                        <a target="_blank" aria-label="Learn more about Moorthy"
                        href="http://submitty.org/developer/rcos_moorthy"
                        style="padding-right:15px;"
                        >
                    {% endif %}
                    <img id="moorthy-duck"
                         src="{{ base_url }}/img/{{ duck_img }}"
                         alt="Duck Moorthy!"
                         height = "50"
                         {% if enable_banner %}
                            style="position:absolute; right: 10px;"
                            onclick="ducky();"
                            tabindex="0"
                         {% endif %}
                    />
                    {% if not enable_banner %}
                    </a>
                    {% endif %}

                    {% if enable_banner %}
                    <img id="submitty-banner"
                         src="{{ base_url }}/img/submitty-banner.png"
                         alt="Happy Submitty Week!"
                         height="80"
                         style="position:absolute;right: -420px; top:-5px;display:none;"
                    />
                    {% endif %}
                </div>

                <a class="flex-col" id="logo-box" href="http://submitty.org" target="_blank" aria-label="Visit submitty dot org">
                    <img id="logo-submitty" src="{{ base_url }}/img/submitty_logo.png" alt="Submitty Logo">
                </a>
                {# assuming that if sidebar_buttons only has len 2 it contains logout and collapse (on index page only) #}
                {% if sidebar_buttons|length > 2 %}
                    <button id="menu-button" class="black-btn">
                        MENU
                        {% if total_notifications %}
                            <span class="notification-badge">{{  total_notifications }}</span>
                        {% endif %}
                    </button>
                {% elseif sidebar_buttons|length %}
                    <a id="logout-button" class="black-btn" href="{{ core.buildUrl(['authentication', 'logout']) }}" aria-label="Logout"><i class="fas fa-power-off"></i></a>
                {% endif %}
            </nav>
            <noscript class="system-message danger">
                You must have JavaScript enabled for Submitty to function properly. Please re-enable it when browsing this site.
            </noscript>
            {% if system_message is not null and system_message|length > 0 %}
            <div class="system-message warning">
                {{ system_message }}
            </div>
            {% endif %}
            <div id='messages'>
                <!-- If the below <div> definition changes, update the design in server.js in displayMessage function -->
                {% for message in messages %}
                    <div id='{{ message.type }}-{{ message.key }}' class="inner-message alert alert-{{ message.type }}">
                        <span>
                            {% if message.type == "error" %}
                            <i class="fas fa-times-circle"></i>
                            {% else %}
                            <i class="fas fa-check-circle"></i>
                            {% endif %}
                            {{ message.error | nl2br }}
                        </span>
                        <a class="fas fa-times" onClick="removeMessagePopup('{{ message.type }}-{{ message.key }}');"></a>
                    </div>
                {% endfor %}
            </div>
            <div id="wrapper">
                {% if sidebar_buttons|length > 0 %}
                    <aside class="preload">
                        <ul>
                            {% for button in sidebar_buttons %}
                                {{ self.render_sidebar_button(button, false) }}
                            {% endfor %}
                        </ul>
                    </aside>
                {% endif %}
                <main id="main">
{# Looks mismatched because this lines up with GlobalFooter.twig #}

{% macro render_sidebar_button(button, mobile) %}
    {% if button.getTitle() == "" %}
        <hr />
    {% else %}
        <li>
            {% if button.getHref() == null %}
                <span
                    class="flex-row {{ button.getClass() }}"
                    {% if button.getId() != "" %}
                        id="{{ [mobile ? 'mobile-' : '', button.getId()]|join }}"
                    {% endif %}
                >
                    <span class="flex-line"> {# col in flex-row #}
                        {% if button.getIcon() != null %}
                            <i class="fa {{ button.getIcon() }}"></i>
                        {% endif %}

                        {{ button.getTitle() }}
                    </span>
                    {% if button.getBadge() > 0 %}
                        <span class="notification-badge">{{  button.getBadge() }} </span>
                    {% endif %}
                </span>
            {% else %}
                <a href="{{ button.getHref() }}"
                    title="{{ button.getTitle() }}"
                    class="flex-row {{ button.getClass() }}"
                    {% if button.getId() != "" %}
                        id="{{ [mobile ? 'mobile-' : '', button.getId()]|join }}"
                    {% endif %}
                    {% if not mobile %}
                        data-toggle="tooltip"
                    {% endif %}
                >
                    <span class="flex-line"> {# col in flex-row #}
                        {% if button.getIcon() != null %}
                            <i class="fa {{ button.getIcon() }} preload"></i>
                        {% endif %}

                        <span class="icon-title"> {{ button.getTitle() }} </span>
                    </span>
                    {% if button.getBadge() > 0 %}
                        <span class="notification-badge">{{  button.getBadge() }} </span>
                    {% endif %}
                </a>

            {% endif %}
        </li>
    {% endif %}
{% endmacro %}
